<template>
  <div class="timeLine">
    <template v-for="it in list">
      <div class="itemLine">
        <div class="time">{{ dayJs(it.time).format('MM.DD') }}</div>
        <div class="lineBox">
          <div class="line"></div>
          <div class="circle"></div>
        </div>
        <div class="type">
          <template v-for="item in it.res">
            <div class="typeList">
              <svg
                t="1682223686464"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="1835"
                width="20"
                height="20"
              >
                <path
                  d="M904 512a395 395 0 0 1-2.61 45.48 391.63 391.63 0 0 1-343.91 343.91A395 395 0 0 1 512 904q-5.25 0-10.47-0.14a391.6 391.6 0 0 1-381.39-381.39Q120 517.25 120 512a395 395 0 0 1 2.61-45.48 391.6 391.6 0 0 1 344-343.91A394.46 394.46 0 0 1 512 120q5.26 0 10.5 0.14a391.6 391.6 0 0 1 381.36 381.39q0.14 5.22 0.14 10.47z"
                  fill="#73ACFF"
                  p-id="1836"
                ></path>
                <path
                  d="M927.19 343.43A447.65 447.65 0 0 0 512 64q-9.36 0-18.66 0.39a448.24 448.24 0 1 0 466.27 466.36v-0.11q0.39-9.3 0.39-18.64a446.46 446.46 0 0 0-32.81-168.57z m-25.8 214.05a391.63 391.63 0 0 1-343.91 343.91A395 395 0 0 1 512 904q-5.25 0-10.47-0.14a391.6 391.6 0 0 1-381.39-381.39Q120 517.25 120 512a395 395 0 0 1 2.61-45.48 391.6 391.6 0 0 1 344-343.91A394.46 394.46 0 0 1 512 120q5.26 0 10.5 0.14a391.6 391.6 0 0 1 381.36 381.39q0.14 5.22 0.14 10.47a395 395 0 0 1-2.61 45.48z"
                  fill="#1F61C1"
                  p-id="1837"
                ></path>
                <path
                  d="M539.49 301.41a28 28 0 0 1-36.78-14.66 450.88 450.88 0 0 1-36.15-164.14A394.46 394.46 0 0 1 512 120q5.26 0 10.5 0.14a394.81 394.81 0 0 0 31.66 144.49 28 28 0 0 1-14.67 36.78zM904 512a395 395 0 0 1-2.61 45.48 446.68 446.68 0 0 1-303.83-131 28 28 0 1 1 39.6-39.6 390.74 390.74 0 0 0 266.7 114.69q0.14 5.18 0.14 10.43z"
                  fill="#FFB640"
                  p-id="1838"
                ></path>
                <path
                  d="M557.48 901.39A395 395 0 0 1 512 904q-5.25 0-10.47-0.14a392.46 392.46 0 0 0-252-355.81 389.78 389.78 0 0 0-129.42-25.58Q120 517.25 120 512a395 395 0 0 1 2.61-45.48 446.68 446.68 0 0 1 303.83 131 446.68 446.68 0 0 1 131 303.83z"
                  fill="#1F61C1"
                  p-id="1839"
                ></path>
              </svg>
              {{ item.type }}
            </div>
          </template>
        </div>
        <div class="number">
          <template v-for="item in it.res">
            <div class="numberList">{{ item.number }}</div>
          </template>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import dayJs from 'dayjs'

const props = defineProps<{
  list: any[]
}>()
</script>

<style lang="less" scoped>
.timeLine {
  padding: 0 20px;
  height: 100%;
  font-size: small;
  .itemLine {
    display: flex;
    justify-content: space-between;
    &:first-child {
      .lineBox {
        > .circle {
          background-color: #6064e7;
        }
      }
    }
    > .time {
      margin-top: 15px;
    }
    > .lineBox {
      position: relative;
      > .line {
        height: 100%;
        width: 2px;
        background-color: #ebebeb;
      }
      > .circle {
        height: 10px;
        width: 10px;
        border-radius: 50%;
        background-color: #aaa;
        position: absolute;
        top: 15px;
        left: -4px;
      }
    }
    > .type {
      .typeList {
        margin-top: 10px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        > svg {
          margin-right: 10px;
        }
      }
    }
    > .number {
      width: 60%;
      text-align: right;
      > .numberList {
        margin-top: 10px;
        margin-bottom: 10px;
        height: 20px;
        line-height: 20px;
      }
    }
  }
}
</style>
